約 4,952,227 件
https://w.atwiki.jp/zyoushiki/pages/96.html
html head title ネ申の間 - トップページ /title link rel = "stylesheet" href = "kami1.css" meta http-equiv="Content-Language" content="ja" meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS" /head body header h1 a href="index.htm" img src="/image/logo.png" alt="Kami" /a /h1 header div id="container" B ul id ="menu" li a href="intro.htm" ネ申の間とは？ /a /li li a href="knowledge.htm" ネ申に従う心得 /a /li li a href="character.htm" ネ申と仲間と屑達 /a /li li a href="goods.htm" 商品 /a /li li a href="game.htm" ゲーム /a /li /ul /B /div h2 トップページ /h2 div id="main" article ul li time datetime="2008-04" 2008年4月 /time 入学 /li li time datetime="2011-03" 2011年3月 /time 卒業 /li /ul 卒業5周年！（ｷﾘｯ!!）byネ申 br br AA等は a href = "http //www37.atwiki.jp/zyoushiki/" B こちら /B /a だぞ。 by糸申士 br /article /div div id="sub" aside div class="bnr_inner" dl a href="kami.htm" dt img src="images/bnr_kami.png"alt="kami" /dt dd このカリスマ性感じるオムツ被ってる彼は一体…？ /dd /a /dl /div div class="bnr_inner" dl a href="http //www.tokumei24.jp/" dt img src="images/bnr_okame.jpg"alt="okame" /dt dd この酷い顔見かけたら警察に通報だ！ /dd /a /dl /div /aside /div footer p id="copyright") small Copyright copy;2010 ネ申の間 /small /p /footer /body /html
https://w.atwiki.jp/a_kurosawa/pages/31.html
◆HTML ◆HTMLDOCTYPEでcssのhoverとposition absoluteの動作が変わる セキュリティで保護された Web ページ コンテンツのみを表示しますか? Ajaxで中身が変わった後のHTMLを見る方法があるかもー… DOCTYPEでcssのhoverとposition absoluteの動作が変わる IE7での動作を比較しました。 html タグの前に ◆互換モード !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" を指定した時は、座標指定は自由に設定できるが、 hover(マウスオーバーした時のデザインを変更するcss)がうまくいかない。 通常時のcssは反映されているが、 マウスカーソルを合わせてもデザインが変わらない。 ◆標準モード !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http //www.w3.org/TR/html4/loose.dtd" を指定した時は hoverは正常に動作するが、position absolute がうまくいかない。 relativeも使ってるけど、はずしてもおかしな座標に表示される。 恐らくhoverはIE7からaタグ以外で使えるようになったりなど、 関係しているかもしれないが…定かではない。 参考 ※後々よく見たら、position absoluteを指定して、 left 100;と指定していたので、 left 100px;としたらちゃんと座標が適用された。 ちゃんと書かないとダメなモードってことですね。 leftやtopなどは100%とも指定できるし、 100pxとも指定できるのでちゃんと書かないとダメです。 セキュリティで保護された Web ページ コンテンツのみを表示しますか? IEでhttps参照とhttp参照が混在しているサイトを開くと、 表示される警告があります。 このページにはセキュリティで保護されている項目と 保護されていない項目が含まれています。 保護されていない項目を表示しますか？ セキュリティで保護された Web ページ コンテンツのみを表示しますか？ このページには、安全なHTTPS 接続を使用しないで配信される コンテンツが含まれており、Webページ全体のセキュリティを損なう おそれがあります。 ↑の2種類あるようです。 httpsがセキュリティで保護されたページです。 URLの構成 お客様がサイトを開いた時に保護されていない項目を表示しないように 選択した場合、ページが正常に動作しません。 そもそも警告が出る事態問題です。 フルパスでhttp参照している部分を全てhttpsに 変更すれば出なくなります。 Ajaxで中身が変わった後のHTMLを見る方法があるかもー… FireFoxでページをHTML形式で保存すると、 Ajaxで書き換えられた情報もちゃんと取得できるらしい！ なんてお得な情報！ ただし、ちゃんと文字コードそのままで表示してくれるような テキストエディタとかで開かないと何が書いてあるのかさっぱり分からないらしいですｗ
https://w.atwiki.jp/projecthikky/pages/70.html
今日の課題：Canvasで線を引く (2016/05/07) コード https //paiza.io/projects/2mhkt4TftcuUXTLVaHhquA 実行結果 https //out.paiza.io/projects/2mhkt4TftcuUXTLVaHhquA/output.html !DOCTYPE html html head title HTML5の練習＠ヒッキープログラミングスレ /title style type="text/css" body { background-color silver; } canvas { background-color white; } /style /head body h4 線を引く /h4 canvas id="mycanvas" width="640" height="480" /canvas script language="javascript" type="text/javascript" function mydraw() { var canvas = document.getElementById( mycanvas ); var ctx = canvas.getContext( 2d ); ctx.beginPath(); ctx.strokeStyle = red ; ctx.moveTo(100, 100); ctx.lineTo(200, 200); ctx.lineTo(200, 150); ctx.lineTo(250, 150); ctx.stroke(); } mydraw(); /script /body /html bodyタグ内にcanvasタグを設置する canvasタグにidとwidthとheightを設定する canvas = document.getElementById( ～ ) メソッドでcanvasへのアクセスを取得する ctx = canvas.getContext( 2d ) でコンテキスト(canvasを操作するためのインターフェース？)を取得する ctx.beginPath() でコンテキストの使用開始を宣言？ ctx.moveTo でカレント座標を設定 追記： beginTo()やclosePath()を呼び出したあとのときだけ座標を設定できる ctx.lineTo でカレント座標から指定座標まで仮の線を引き、指定座標を新たなカレント座標にする ctx.strokeStyle で線の色を指定する、指定方法はスタイルシート(CSS)の色指定方法と同じ ctx.stroke で仮の線に実際に線を引く？
https://w.atwiki.jp/projecthikky/pages/84.html
今日の課題：Canvasで弧を描く コード https //paiza.io/projects/QcigcidDIm0B9mD-Ghes4Q 実行結果 https //out.paiza.io/projects/QcigcidDIm0B9mD-Ghes4Q/output.html !DOCTYPE html html head title HTML5の練習＠ヒッキープログラミングスレ /title style type="text/css" body { background-color silver; } canvas { background-color white; } /style /head body h4 弧を描く /h4 canvas id="mycanvas" width="640" height="480" /canvas script language="javascript" type="text/javascript" function mydraw() { var canvas = document.getElementById( mycanvas ); var ctx = canvas.getContext( 2d ); ctx.beginPath(); ctx.strokeStyle = red ; ctx.moveTo(50, 50); ctx.arcTo(120, 180, 200, 200, 200); ctx.lineTo(300, 350); ctx.stroke(); } mydraw(); /script /body /html arcTo(x1,y1,x2,y2,r) よくわからん
https://w.atwiki.jp/projecthikky/pages/76.html
コード https //paiza.io/projects/gZAL21VTLHUbDrl4_GnvXA 実行結果 https //out.paiza.io/projects/gZAL21VTLHUbDrl4_GnvXA/output.html !DOCTYPE html html head title HTML5の練習＠ヒッキープログラミングスレ /title style type="text/css" body { background-color silver; } canvas { background-color white; } /style /head body h4 長方形を描く /h4 canvas id="mycanvas" width="640" height="480" /canvas script language="javascript" type="text/javascript" function mydraw() { var canvas = document.getElementById( mycanvas ); var ctx = canvas.getContext( 2d ); ctx.beginPath(); ctx.strokeStyle = red ; ctx.strokeRect(100, 100, 100, 50); ctx.fillStyle = blue ; ctx.fillRect(250, 150, 200, 200); ctx.clearRect(300, 200, 50, 50); } mydraw(); /script /body /html strokeRect(x,y,w,h) 線の長方形を描く。x,yが左上隅の座標、w,hが幅と高さ fillStyle 塗りつぶしの色を指定する。色はStyleSheet(CSS)と同じ形式を文字列で指定する。 fillRect(x,y,w,h) 塗りつぶしの長方形を描く clearRect(x,y,w,h) 長方形に色を消す
https://w.atwiki.jp/projecthikky/pages/80.html
今日の課題：Canvasで画像ファイルを描く コード https //paiza.io/projects/yO6K0ld2MlpkNlhBOtX56g 実行結果 https //out.paiza.io/projects/yO6K0ld2MlpkNlhBOtX56g/output.html !DOCTYPE html html head title HTML5の練習＠ヒッキープログラミングスレ /title style type="text/css" body { background-color silver; } canvas { background-color white; } /style /head body h4 画像ファイルを描く /h4 canvas id="mycanvas" width="640" height="480" /canvas script language="javascript" type="text/javascript" function mydraw() { var canvas = document.getElementById( mycanvas ); var ctx = canvas.getContext( 2d ); var img = new Image(); img.onload = function () { ctx.drawImage(img, 10, 10); ctx.drawImage(img, 100, 10, img.width * 2, img.height * 2); var w = img.width / 2; var h = img.height / 2; ctx.drawImage(img, w / 2, h / 2, w, h, w * 8, 10, w * 4, h * 4); } img.src = http //0.gravatar.com/avatar/b57970073a83378331824d286bd00fb8 ; } mydraw(); /script /body /html 画像ファイルはImageオブジェクトを使ってロードしてdrawImage()で描写する Imageオブジェクトのsrcに画像ファイルのパス(URL)を指定するとロードが開始する Imageオブジェクトのonloadに処理を指定しておいて、画像のロード完了直後に画像を描写できるようにする Imageオブジェクトのwidth,heightで幅、高さを取得できる（もちろん画像ロード後） drawImage(img,x,y) (x,y)の位置を左上とし画像を描写する drawImage(img,x,y,w,h) (x,y)の位置を左上としサイズ(w,h)に拡大・縮小して描写する drawImage(img,sx,sy,sw,sh,dx,dy,dw,dh) 画像ファイルの(sx,sy)の位置からサイズ(sw,sh)だけ切り取って、Canvasの(dx,dy)の位置を左上としサイズ(dw,dh)に拡大・縮小して描写する
https://w.atwiki.jp/jasagiri/pages/68.html
RFC：http //www5d.biglobe.ne.jp/~stssk/rfcjlist.html 規格対応エレメント表 http //meiert.com/en/indices/html-elements/ html5 http //www.html5.jp/ URI-Templates http //bitworking.org/projects/URI-Templates/ http //builder.japan.zdnet.com/sp/firefox-3-for-developer-2008/ StatusCode http //www.studyinghttp.net/status_code http //thoughtpad.net/alan-dean/http-headers-status.html http //d.hatena.ne.jp/IwamotoTakashi/20090429/p1 REST 何がRESTを良くするか：http //www.infoq.com/jp/news/2008/11/rest-api RESTfullなアプリケーションを記述する：http //www.infoq.com/jp/articles/subbu-allamaraju-rest REST API デザイン http //www.25hoursaday.com/weblog/2008/10/24/RESTAPIDesignInventMediaTypesNotProtocolsAndUnderstandTheImportanceOfHyperlinks.aspx OpenID：http //code.google.com/p/openidengine/ ：http //www.atmarkit.co.jp/fsecurity/rensai/openid01/openid01.html ：http //www.goodpic.com/mt/archives2/2008/01/openid_oauth.html ：http //d.hatena.ne.jp/lyokato/20080816/1218866900 OAuth：http //www.atmarkit.co.jp/fsecurity/special/106oauth/oauth01.html
https://w.atwiki.jp/emeditor/pages/102.html
HTML整形 選択中のHTMLを整形するマクロです。 PerlScriptで動作します。 （jsee,vbeeなど、ほかの言語への移植歓迎します。） 2006.11.10 対応タグを大幅に増やしました。 #language="PerlScript" my $src = $Window- document- selection- Text; my ($indent) = $src =~ /^([ \t]+) /g; $indent =~ s/\t/ /g; $indent = ( length $indent ) / 2; $src =~ s/\x0D\x0A/\n/g; $src =~ tr/\x0D\x0A/\n\n/; my (@rep); map { $src =~ s/($_)/{push @rep, $1;"replaceEmMacro[$#rep]"}/eigs; } ( q{ SCRIPT.*? \/SCRIPT }, q{ PRE.*? \/PRE }, q{ STYLE.*? \/STYLE }, q{ EMBED.*? \/EMBED }, q{ TEXTAREA.*? \/TEXTAREA }, q{ \!\-\-.*?\-\- }, ); map { $src =~ s/[ \t]*( $_.*? )\s*/$1\n/gsi } ( \!DOCTYPE , HTML , HEAD , META , LINK , BODY , TABLE , TBODY , COL , TR , FORM , SELECT , BR , HR , CENTER , FRAMESET , FRAME , MAP , NOSCRIPT ); map { $src =~ s/[ \t]*( $_.*? )\s*/$1/gsi } ( TH , TD ); map { $src =~ s/[ \t]*( \/$_ )\s*/$1\n/gsi } ( HTML , HEAD , TITLE , BODY , TABLE , TBODY , TR , TH , TD , FORM , SELECT , OPTION , P , h\d , CENTER , DIV , FRAMESET , FRAME , MAP , UL , LI , NOSCRIPT ); map { $src =~ s/[ \t]*( $_.*? )/\n$1/gsi } ( TABLE , P , h\d , DIV , INPUT , FRAMESET , MAP , UL , LI ); $src =~ s/^[ \t]+//gm; $src =~ tr/\n//s; my $output; for my $line ( split( /\n/, $src ) ) { if ( $line =~ / (TABLE|TBODY|TR|FRAMESET|MAP|UL)/i ) { # $output .= " " x $indent; $indent++; } elsif ( $line =~ / \/(TABLE|TBODY|TR|FRAMESET|MAP|UL)/i ) { # $indent--; $output .= " " x $indent; } else { $output .= " " x $indent; } $output .= "$line\n"; } for my $i ( 0 .. $#rep ) { my $j = $#rep - $i; $output =~ s/replaceEmMacro\[$j\]/$rep[$j]/e; } $Window- document- Write($output); 名前 コメント
https://w.atwiki.jp/projecthikky/pages/85.html
今日の課題：Canvasのクリッピング コード https //paiza.io/projects/0zAlPNkhOi4RYc7HnnogAw 実行結果 https //out.paiza.io/projects/0zAlPNkhOi4RYc7HnnogAw/output.html !DOCTYPE html html head title HTML5の練習＠ヒッキープログラミングスレ /title style type="text/css" body { background-color silver; } canvas { background-color white; } /style /head body h4 クリッピング /h4 canvas id="mycanvas" width="640" height="480" /canvas script language="javascript" type="text/javascript" function mydraw() { var canvas = document.getElementById( mycanvas ); var ctx = canvas.getContext( 2d ); ctx.beginPath(); ctx.fillStyle = black ; ctx.fillRect(0, 0, 150, 150); ctx.beginPath(); ctx.moveTo(100, 100); ctx.lineTo(200, 100); ctx.lineTo(150, 200); ctx.closePath(); ctx.clip(); ctx.beginPath(); ctx.fillStyle = red ; ctx.rect(110, 100, 50, 100); ctx.fill(); ctx.beginPath(); ctx.fillStyle = blue ; ctx.fillRect(400, 100, 100, 100); // クリップ領域外なので描かれない // クリッピングの解除方法わからない件 } mydraw(); /script /body /html stroke()やfill()と同じ感じでclip() を使う。 clip()を使うとクリップした領域にしか絵を描けなくなる。
https://w.atwiki.jp/nicepaper/pages/70.html
HTMLとCSSについての記事一覧です。 目次 HTML5とCSS3とは HTML5の宣言文 html5+css3で基本的なページをつくってみよう！① html5+css3で基本的なページをつくってみよう！② headに入れる要素について HTML５で登場する新タグ(新要素) header margin、border、paddingの違いについて CSSのリセット 擬似要素before,afterの使い方 各ブラウザにおけるcss内のfont-familyの挙動 文中の文字の一部のみを指定する場合 HTML5でのタグ使用の注意点 インライン要素とブロックレベル要素（ブロック要素） CSSでmarginプロパティが効かない時の対策 boxの配置方法 divのboxの上にさらにboxを追加し、回転させる tableとlistについて レスポンシブWebデザインについて HTMLとCSSで使う数字の単位の関係 HTMLの細かい文法事項 CSS3の基本 テキストに影を付けるtext-shadow ベンダープレフィックスとは CSSで角丸にするborder-radius URLを使って特定のファイル閲覧(絶対パスと相対パス) CSSで見出しデザイン1 CSSで見出しデザイン2 Googleマップ、YouTube、電話番号(スマートフォン用)を埋め込む方法 表(table)の作り方 背景画像をブラウザいっぱいに表示しているCSS記述方法 CSSでグラデーションその1 CSSデザインのための色の基礎知識 CSSでページを常に中央に表示させて、拡大縮小しても崩れないようにする。 CSS3で画像をフェードインさせたりする。 画像(ボタンの画像)を使用したメニューの作成 font-family(フォントの種類) CSSのline-heightで単位を指定してはいけないのか？ 疑似要素 まとめ CSS3で画像を領域内に上下中央でフィットさせる方法 CSSで文字やテキストを上下中央の中心揃えにする方法 vertical-alignが効かないときの対策 CSSを確実に読み込む方法 ふんわりと色を変えることができるtransitionプロパティ transformプロパティ 段組みに関するCSSプロパティ CSSでのid名やclass名の付け方 レスポンシブデザインとスマホで確認した時の落とし穴 簡単なformの作り方 CSSで直下の子要素のみに適用させたい場合の記述方法 liタグの中にddが複数ある際の改行処理～インデントを1つ目のddに揃えたい～ シマシマのテーブルを作る。 CSSでフォントを指定する CSSでフォントをちょっとした工夫をして見やすくするver1 CSSでフォントをちょっとした工夫をして見やすくするver2 CSSでフォントをちょっとした工夫をして見やすくするver3 黄金比でフォントサイズをデザインする リスト横並びデザイン1 sectionタグで読み込むCSSを限定する 今風のfont-familyをあつめてみた CSSでclearfix CSSで隣接セレクタを使い、見出しタグ(h1)タグとpタグの間を設定する CSS3のarticleタグと隣接セレクターを使って間隔を調整 HTMLで文字を実体参照する。 TwitterをHTMLに埋め込む方法 レスポンシブWEBデザインテンプレート（スタイルシートで複数記述編） HTMLとCSSで進捗バーを作る1 HTMLとCSSで進捗バーを作る2 HTMLタグをデバイスごとに、javascriptとjQueryで振り分け WEB制作のためのIE対策1～バージョンごとの表示を確認する～ CSSで縦書き開発1 CSSで縦書き開発2～PHPとHTML5とCSS3で漢字学習システムのレイアウト作り～ 他カテゴリと混在のもの WEBの画像をラスターデータからベクターデータにする HTMLタグをデバイスごとに、javascriptとjQueryで振り分け